window.onload = function(){
	let submitBtn = document.querySelector(".submitBtn");
	let formInputs = document.querySelectorAll(".form-inputs");
	let Inputs = document.querySelectorAll("input");
	let tipOnes = document.querySelectorAll(".tip-one");
	let item = document.querySelector(".item");
	
	
	// 当点击提交按钮时
	submitBtn.onclick = function (){
		let flag = false;
		// 当表格内容为空时，循环遍历出现红字和红框提示
		Inputs.forEach((index,i)=>{
			console.log(index.value);
			if(index.value == "" ||index.value == null ){
				flag = true;
			index.style.borderColor = "#F04631";
			index.style.backgroundColor = "rgba(240,70,49,.06)";
			tipOnes[i].style.display = "block";
			}
		})
		if(flag){
			alert("请完善信息之后提交。。。");
		}else{
			alert("信息提交成功。。。");
		}
	}
	//当信息输入时边框恢复
	setInterval(()=>{
		Inputs.forEach((item,i)=>{
			if(item.value != ""){
				item.style.backgroundColor = "#ffffff";
				item.style.borderColor = "#ccc";
				tipOnes[i].style.display = "none";
			}
		})
	},10)
	
	// 出现下拉框
	let areaScolls = document.querySelectorAll(".area-scoll ul");
	let myUl = document.querySelectorAll(".my");
	let chooseWays = document.querySelectorAll(".choose-way");
	let formChooses = document.querySelectorAll(".form-choose");
	let offs = document.querySelectorAll(".off");
	let imgOffs = document.querySelectorAll(".img-off");
	let special = document.querySelector("#special");
	let bigUl = document.querySelector(".big-ul");
	let iOne = document.querySelector(".i-one");
	let li1 = document.querySelector(".li1");
	let ulOne = document.querySelector(".ul-one");
	let ulTwo = document.querySelector(".ul-two");
	let ulThree = document.querySelector(".ul-three");
	let lis = document.getElementsByTagName("li");
	
		// 出现下拉框
		chooseWays.forEach((index)=>{
			// 获焦事件
			index.onfocus = function(){
				this.parentNode.querySelector(".area-scoll").querySelector("ul").style.display = "block";
			}
			// 失焦事件
			index.onblur = function(){
				areaScolls.forEach((el)=>{
				// 当鼠标点击时延迟100毫秒再失焦
				setTimeout(()=>{
					el.style.display = "none";
				},200)
				})
			}
			// 鼠标移入输入框关闭按钮出现
			index.onmouseover = function(){
				if(!(index.value == "")){
					this.parentNode.querySelector(".off").style.display = "block";
				}
			}
			// 移出事件
			index.onmouseout = function(){
				if((index.value == "")){
					this.parentNode.querySelector(".off").style.display = "none";
				}
			}
			//输入框有内容点击关闭清除内容
			imgOffs.forEach((off)=>{
				off.onclick = function(){
					this.parentNode.parentNode.querySelector("input").value = "";
				}
			})
		})
		
		// 地区三个ul下拉框显示
		let li2 = "";
		let li3 = "";
		special.onfocus = function(){
			setTimeout(function(){
				flag=true;
			},100)
			f = false;
			special.parentNode.querySelector(".big-ul").querySelector(".ul-one").style.display = "block";
		}
		
		ulOne.onclick = function(e){
			let el =e.srcElement;
			li2= el.innerText+"/";
			flag = true;
			special.value = li2;
			ulOne.style.width = "150px";
			ulOne.style.display = "block";
			ulTwo.style.display = "block";
			ulTwo.style.width = "300px";
		}
		
		ulTwo.onclick = function(e){
			flag = true
			let el =e.srcElement;
			li3= el.innerText+"/";
			special.value = li2+li3;
			ulThree.style.display = "block";
			ulOne.style.width = "150px";
			ulTwo.style.width = "150px";
		}
		ulThree.onclick = function(e){
			let el =e.srcElement;
			special.value = li2 + li3 +el.innerText;
			ulOne.style.display = "none";
			ulTwo.style.display = "none";
			setTimeout(()=>{
				ulThree.style.display = "none";
			},50)
		}
		
		// 当点击除地区三个ul外下拉框消失
		document.onclick = function(e){
			let el = e.srcElement.parentNode;
			if( flag ){
				if( !(el.className == "ul-one" || el.className == "ul-two" || el.className == "choose-way" )){
					ulOne.style.display = "none";
					ulTwo.style.display = "none";
					ulThree.style.display = "none";
					ulOne.style.width = " 446px";
					flag = false;
				}
			}
		}
		// 选取下拉框内容
		let biglis = document.querySelectorAll(".big-ul li");
		for( let i = biglis.length; i < lis.length; i++){
			// 鼠标移入事件
			lis[i].onmouseover =function(){
				this.style.backgroundColor = "rgba(31,56,88,.05)";
				this.style.color = "#000000";
			}
			// 鼠标移出事件
			lis[i].onmouseout =function(){
				this.style.backgroundColor = "#fff";
				this.style.color = "rgba(31,56,88,.8)";
			}
			//点击事件 li选中内容显示在输入框 
			lis[i].onclick = function(){
				this.parentNode.parentNode.parentNode.querySelector("input").value = lis[i].innerText;
			}
		}
	// 点击同意合约
	let imgTures = document.querySelectorAll(".imgTure");
	let count = 0;
	item.onclick = function(){
		imgTures[count].style.display = "none";
		count++;
		if( count >= 2 ){
			count = 0;
		}
		imgTures[count].style.display = "block";
	}
	
}